.blue-tooth-connector {
  font-size: 14px;
  border-radius: 0;
  height: 44px;
  width: 100%;
  color: #15161a;

  &.connected {
    background-image: linear-gradient(135deg, #3d8bff 0%, #0066ff 100%);
    color: #ffffff;
  }

  &.disconnected,
  &.connecting {
    background: #e5e7eb;
    box-shadow: 0 -1px 0 0 #d2d4d9;
    color: #15161a;
  }

  &.connect-error {
    background-image: linear-gradient(135deg, #fd8989 0%, #fa5151 100%);
    color: #ffffff;
  }

  .blue-tooth-content {
    height: 100%;
    width: 100%;
  }

  .standard-blue-tooth-icon {
    height: 20px;
    width: 20px;
    float: left;
    margin: 12px 8px 0 16px;
    background: #fff;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 20px 20px;

    &.connected {
      background-image: url("");
    }

    &.disconnected,
    &.connecting {
      background-image: url("");
    }

    &.connect-error {
      background-image: url("");
      background-size: 13px 13px;
      background-position: 4px 3px;
    }
  }

  .device-status-text {
    .text {
      font-size: 14px;
      line-height: 44px;
    }
  }

  .device-action {
    position: absolute;
    right: 16px;
    top: 10px;
    height: 24px;

    .device-action-link {
      border: 1px solid #0066ff;
      width: 100%;

      .link {
        color: #0066ff!important;
        padding: 5px;
      }
    }

    .device-action-text {
      border-radius: 12px;
      text-align: center;
      height: 22px;

      .text {
        font-size: 12px;
        vertical-align: middle;
        line-height: 22px;
        display: inline;
        letter-spacing: 0;
        color: #fff;
      }
    }

    .device-action-btn {
      border: 1px solid #fff;
      width: 52px;
    }

    .device-action-connecting {
      width: 24px;
    }
  }

  .blue-tooth-icon,
  .device-status-text {
    vertical-align: middle;
    width: 60%;
    max-height: 100%;
    overflow-y: auto;
  }
}
